<template>
	<transition>
		<div class="pro_list">
			<header-component></header-component>
			<div class="list">
				<div class="sort">
					<p>
						<span class="colors">综合排行</span>
						<i></i>
						<i></i>
					</p>
					<p>
						<span>销量</span>
						<i></i>
						<i></i>
					</p>
					<p>
						<span>信用</span>
						<i></i>
						<i></i>
					</p>
					<p>
						<span>价格</span>
						<i></i>
						<i></i>
					</p>
				</div>
				<div class="pro_link">
					<router-link to="Pro_details">
						<img src="~imgs/pro_list_3.gif"/>
					</router-link>
				</div>
				<div class="pro_car">
					<div class="title">全球车载产品</div>
					<div class="pro_main">
						<ul>
							<li v-for="i in proList" :key="i.id">
								<router-link to="Pro_details">
									<img :src="i.img_src"/>
								</router-link>
								<p>
									<span v-text="i.title"></span>
									<em v-text="i.txt_1"></em>
									<em v-text="i.txt_2"></em>
									<i>
										{{i.price | decimal}}
									</i>
									<a href="javascript:void(0)">
										<img src="~imgs/home_17.gif"/>
									</a>
								</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	import Header from "./components/Header"
	import axios from "axios"
	export default{
		data(){
			return{
				proList:[]
			}
		},
		components:{
			"header-component":Header
		},
		mounted(){
			var that = this;
			axios.get("/api/proList.json")
			.then(res => {
				that.proList = res.data.data.proList;
			})
		},
		filters:{
			decimal(val){
				return "￥" + val.toFixed(2)
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.v-enter
		transform: translate3d(100%, 0, 0);
		opacity: 0;
	.v-leave-to
		transform: translate3d(-100%, 0, 0);
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
	.v-enter-active,.v-leave-active
		transition: all .2s;
	.pro_list
		width: 100%;
		overflow: hidden;
		padding-bottom: 1.2rem;
		.list
			width: 7.02rem;
			margin: 0 auto;
			.sort
				width: 100%;
				display: flex;
				justify-content: space-between;
				font-size: 0.24rem;
				p
					float: left;
					color: #515151;
					position: relative;
					margin-top: 0.2rem;
					span
						float: left;
					.colors
						color: #5aa0e7;
					i
						width: 0;
						height: 0;
						border: 0.12rem solid transparent;
						border-top: 0.12rem solid #4db1fe;
						float: left;
						margin-top: 0.2rem;
						margin-left: 0.08rem;
					i:last-child
						position: absolute;
						top: -0.3rem;
						right: 0;
						content: "";
						width: 0;
						height: 0;
						border: 0.12rem solid transparent;
						border-bottom: 0.12rem solid #4db1fe;
						float: left;
						opacity: .5;
			.pro_link
				width: 100%;
				img
					width: 100%;
			.pro_car
				width: 100%;
				.title
					width: 2.46rem;
					margin: 0.3rem auto;
					background: url("~imgs/pro_line.gif")no-repeat center;
					background-size: 100% 0.02rem;
					text-align: center;
					font-size: 0.24rem;
					color: #515151;
				.pro_main
					li:nth-of-type(odd)
						display: flex;
						flex-flow: wrap;
						float: left;
						a
							float: left;
							img
								width: 3.5rem;
						p
							margin: 0 0.18rem;
							float: right;
							width: 3.14rem;
							span,em
								display: block;
							span
								font-size: 0.24rem;
								color: #090909;
							em
								font-size: 0.22rem;
								color: #090909;
							i
								font-size: 0.24rem;
								color: #f51818;
								float: left;
							a
								margin-left: 1.28rem;
								float: left;
								img
									width: 0.4rem;
									height: 0.4rem;
					li:nth-of-type(even)
						float: right;
						a
							img
								width: 3.5rem;
						p
							margin: 0.2rem 0.18rem 0;
							float: left;
							width: 3.14rem;
							span,em
								display: block;
							span
								font-size: 0.24rem;
								color: #090909;
							em
								font-size: 0.22rem;
								color: #090909;
							i
								font-size: 0.24rem;
								color: #f51818;
								float: left;
							a
								margin-left: 1.28rem;
								float: left;
								img
									width: 0.4rem;
									height: 0.4rem;
</style>